<template>
  <div>
    <el-dialog title="模板选择" center :visible.sync="log" width="1300px" :close-on-click-modal="false">
      <div class="flexbc">
          <div @click="xuanzhong(1)" style="cursor: pointer;">
            <div style="margin-bottom: 20px; font-size: 24px; text-align: center; color: rgb(51, 51, 51);">模版一（原模版）</div>
            <div style="height: 630px;" :class="moban == 1?'act xian':'xian'"><img src="../../../static/img/moban1.png" style="width: 500px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div  :class="moban == 1?'act2':''" style="border: 1px solid rgb(229, 229, 229);border-radius:27px; cursor: pointer; padding: 10px 30px; border-radius: 20px; cursor: pointer;">选择</div>
            </div>
          </div>
          <div @click="xuanzhong(2)" style="cursor: pointer;">
            <div style="margin-bottom: 20px; font-size: 24px; text-align: center; color: rgb(51, 51, 51);">模版二（新增）</div>
            <div style="height: 630px;" :class="moban == 2?'act xian':'xian'"><img src="../../../static/img/moban2.png" style="width: 500px; margin: 0 20px;"></div>
            <div style="margin: 20px 0;" class="flexcc">
              <div  :class="moban == 2?'act2':''" style="border: 1px solid rgb(229, 229, 229);border-radius:27px; cursor: pointer; padding: 10px 30px; border-radius: 20px; cursor: pointer;" >选择</div>
            </div>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="xuanzhonggo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import axios from "axios";
  export default {
    name: 'mobanxuanze',
    props:['moban2'],
    data() {
      return {
        log:false,
        moban:1
      }
    },
    created() {
      if(this.moban2){
        this.moban = this.moban2
      }
      console.log(this.moban2)
    },
    methods:{
      xuanzhong:function(item){
        this.moban = item
      },
      xuanzhonggo:function(){
        this.$emit('mobanxuanze',this.moban)
        this.log = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .xian{ padding: 30px; border: 3px solid rgb(186, 185, 185);}
  .act{ padding: 30px; border: 3px solid rgb(255, 1, 1) !important;}

  .act2{ background: rgb(233, 244, 255) !important; border: 1px solid rgb(0, 132, 255) !important; color: rgb(0, 126, 255) !important;}
</style>
